<template>
    <div class="radar">
        <canvas id="radarCanvas"></canvas>
        <slot name="default"></slot>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";

    @Component({components: {}})
    export default class Radar extends Vue {
        private canvasDom: any = "";
        private context: any = "";
        private size: number = 375;
        private goldColor = "229,46,89";
        private time: number = 0;
        private degToPi = Math.PI / 180;
        private timer: number = 0;

        private get center(): any {
            return {x: this.size / 2, y: this.size / 2};
        }

        private point(r: number, deg: number): any {
            return {
                x: r * Math.cos(this.degToPi * deg),
                y: r * Math.sin(this.degToPi * deg),
            };
        }


        private drawRadar(): void {
            this.time++;
            const split = 120;
            const feature = 15;
            const startR = 230;
            let len = 5;

            this.context.fillStyle = "#fff";
            this.context.beginPath();
            this.context.rect(-2000, -2000, 4000, 4000);
            this.context.fill();

            this.context.strokeStyle = "rgba(229,46,89,0.2)";
            this.context.moveTo(-this.size / 2, 0);
            this.context.lineTo(this.size / 2, 0);
            this.context.moveTo(0, -this.size / 2);
            this.context.lineTo(0, this.size / 2);
            this.context.stroke();

            this.context.strokeStyle = this.alphaColor(1);
            let r = this.size / 2;
            let lineDeg = (this.time / .7) % 360;
            let lineDegLen = 100;
            for (let i = 0; i < lineDegLen; i++) {
                const deg1 = (lineDeg - i - 1);
                const deg2 = (lineDeg - i);

                const point1 = this.point(r, deg1);
                const point2 = this.point(r, deg2);
                let opacity = 1 - (i / lineDegLen) - 0.3;
                if (i == 0) {
                    opacity = 1;
                }
                this.context.beginPath();
                this.context.fillStyle = this.alphaColor(opacity);
                this.context.moveTo(0, 0);
                this.context.lineTo(point1.x, point1.y);
                this.context.lineTo(point2.x, point2.y);
                // this.context.stroke();
                this.context.fill();
            }

            this.condCircle(375 / 2, 2, (deg: any) => {
                return true;
            });
            this.condCircle(375 / 3, 1, (deg: any) => {
                return (deg % 5) < 3;
            });
            this.condCircle(375 / 4.8, 1, (deg: any) => {
                return (deg % 3) < 1;
            });

        }

        private mounted() {
            this.size = document.body.clientWidth;
            this.$nextTick(() => {
                this.canvasDom = document.getElementById("radarCanvas");
                this.canvasDom.width = this.size;
                this.canvasDom.height = this.size;
                this.context = this.canvasDom.getContext("2d");
                this.context.restore();
                this.context.translate(this.center.x, this.center.y);
                this.timer = setInterval(() => {
                    this.drawRadar();
                }, 10);
            });
        }

        private destroyed() {
            clearInterval(this.timer);
        }

        private alphaColor(alpha: number): string {
            return `rgba(${this.goldColor},${alpha})`;
        }

        private condCircle(r: number, lineWidth: number, cb: any) {
            this.context.lineWidth = lineWidth;
            this.context.strokeStyle = this.alphaColor(.7);

            this.context.beginPath();
            for (let i = 0; i <= 360; i++) {
                let point = this.point((r - lineWidth) * .95, i);
                if (cb(i)) {
                    this.context.lineTo(point.x, point.y);
                } else {
                    this.context.moveTo(point.x, point.y);
                }
            }
            this.context.stroke();

        }
    }
</script>

<style scoped lang="stylus">
    .radar
        width 100vw;
        height 100vw;

        #radarCanvas
            position absolute;
            width 100vw;
            height 100vw;
            z-index -1;
</style>